<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" ><![endif]-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Online CSV Viewer</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <script type="text/javascript" src="deflate/pako.min.js"></script>
<script type="text/javascript">
function bytesToString(arr)
{
    var str = '';

    for (var i = 0; i < arr.length; i++)
    {
        str += String.fromCharCode(arr[i]);
    }

    return str;
};

function encode(data)
{
  return btoa(bytesToString(pako.deflateRaw(encodeURIComponent(data))));
};

function getDesc()
{
	var data = document.getElementById('desc').value;
	var lines = data.split('\n');
	var result = [];

	for (var i = 0; i < lines.length; i++)
	{
		if (lines[i].charAt(0) != '#' && lines[i].length > 0)
		{
			result.push('#' + lines[i]).replace;
		}
	}

	return result.join('\n');
};

function create()
{
	var url = document.getElementById('url').value;
	var area = document.getElementById('textarea');
	var a = document.getElementById('result');
	area.style.display = 'none';
	area.innerHTML = '';
	a.innerHTML = '';

	var link = 'https://import.diagrams.net/';
	var title = document.getElementById('title').value;
  var params = [];

  params.push('desc=' + encode(JSON.stringify({url: url, format: 'csv', data: getDesc()})));

	if (title.length > 0)
	{
    params.push('title=' + encodeURIComponent(title));
	}

	link += '?' + params.join('&');
	a.setAttribute('href', link);
	a.appendChild(document.createTextNode(link));
}
</script>
</head>
<body onload="document.getElementById('url').focus();">
 <h2>Online CSV Viewer</h2>
 View public CSV files:
 <br><br>
 1. Link to CSV file: <input type="text" id="url" size="80" value="" placeholder="https://jgraph.github.io/drawio-diagrams/diagrams/orgchart.csv"></input>
 <br><small>Note: Public Google sheets can be used via https://docs.google.com/spreadsheets/d/{fileId}/export?format=csv&usp=sharing where {fileId} is
 the ID of the file.</small>
 <br><br>
 2. Enter Title: <input type="text" size="30" id="title" placeholder="Title"></input> (Optional)
 <br><br>
 3. Enter Description:
 <br>
 <textarea rows="20" cols="100" id="desc"
 	spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">
#
# Example CSV import. Use # for comments and # for configuration. Paste CSV below.
# The following names are reserved and should not be used (or ignored):
# id, tooltip, placeholder(s), link and label (see below)
#

# Node label with placeholders and HTML.
# Default is '%name_of_first_column%'.

label: %name%<br><i style="color:gray;">%position%</i><br><a href="mailto:%email%">Email</a>

# Node style (placeholders are replaced once).
# Default is the current style for nodes.

style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1;fillColor=%fill%;strokeColor=%stroke%;

# Parent style for nodes with child nodes (placeholders are replaced once).

parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;

# Optional column name that contains a reference to a named style in styles.
# Default is the current style for nodes.

stylename: -

# JSON for named styles of the form {"name": "style", "name": "style"} where style is a cell style with
# placeholders that are replaced once.

styles: -

# JSON for variables in styles of the form {"name": "value", "name": "value"} where name is a string
# that will replace a placeholder in a style.

vars: -

# Optional column name that contains a reference to a named label in labels.
# Default is the current label.

labelname: -

# JSON for named labels of the form {"name": "label", "name": "label"} where label is a cell label with
# placeholders.

labels: -

# Uses the given column name as the identity for cells (updates existing cells).
# Default is no identity (empty value or -).

identity: -

# Uses the given column name as the parent reference for cells. Default is no parent (empty or -).
# The identity above is used for resolving the reference so it must be specified.

parent: -

# Adds a prefix to the identity of cells to make sure they do not collide with existing cells (whose
# IDs are numbers from 0..n, sometimes with a GUID prefix in the context of realtime collaboration).
# Default is csvimport-.

namespace: csvimport-

# Connections between rows ("from": source colum, "to": target column).
# Label, style and invert are optional. Defaults are '', current style and false.
# If placeholders are used in the style, they are replaced with data from the source.
# An optional placeholders can be set to target to use data from the target instead.
# In addition to label, an optional fromlabel and tolabel can be used to name the column
# that contains the text for the label in the edges source or target (invert ignored).
# In addition to those, an optional source and targetlabel can be used to specify a label
# that contains placeholders referencing the respective columns in the source or target row.
# The label is created in the form fromlabel + sourcelabel + label + tolabel + targetlabel.
# Additional labels can be added by using an optional labels array with entries of the
# form {"label": string, "x": number, "y": number, "dx": number, "dy": number} where
# x is from -1 to 1 along the edge, y is orthogonal, and dx/dy are offsets in pixels.
# An optional placeholders with the string value "source" or "target" can be specified
# to replace placeholders in the additional label with data from the source or target.
# The target column may contain a comma-separated list of values.
# Multiple connect entries are allowed.

connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \
         "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}

# Node x-coordinate. Possible value is a column name. Default is empty. Layouts will
# override this value.

left:

# Node y-coordinate. Possible value is a column name. Default is empty. Layouts will
# override this value.

top:

# Node width. Possible value is a number (in px), auto or an @ sign followed by a column
# name that contains the value for the width. Default is auto.

width: auto

# Node height. Possible value is a number (in px), auto or an @ sign followed by a column
# name that contains the value for the height. Default is auto.

height: auto

# Padding for autosize. Default is 0.

padding: -12

# Comma-separated list of ignored columns for metadata. (These can be
# used for connections and styles but will not be added as metadata.)

ignore: id,image,fill,stroke,refs,manager

# Column to be renamed to link attribute (used as link).

link: url

# Spacing between nodes. Default is 40.

nodespacing: 40

# Spacing between levels of hierarchical layouts. Default is 100.

levelspacing: 100

# Spacing between parallel edges. Default is 40. Use 0 to disable.

edgespacing: 40

# Name or JSON of layout. Possible values are auto, none, verticaltree, horizontaltree,
# verticalflow, horizontalflow, organic, circle or a JSON string as used in Layout, Apply.
# Default is auto.

layout: auto

#If the CSV at the given URL has no column names in the first line, then please
#add them here as a comma-separated list, eg. name,location,id
</textarea>
 <br><br>
 <button onclick="create();return false;" style="font-weight:bold;">4. Click Here!</button>
 <br><br>
 <a href="" target="_blank" id="result"></a>
 <textarea style="display:none;" rows="20" cols="100" id="textarea"
 	spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
</body>
</html>
